<!-- HTML5 'section' element: a thematic grouping of content.
 And this block exactly "represents a generic document section"e. We'll write posts -->
<section id="content" class="body">
    <!-- List of posts(ol), each one(li) being an 'article' with its:
        - title(an html5 'header').
        - content (a simple div).
        - info (a html5 'footer').
    -->
    <ol id="posts-list" class="hfeed"> 
        <li>
            <article class="hentry">	
                <header> <!-- The post's title-->
                    <h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">First steps</a></h2>
                </header>

                <footer class="post-info"> <!-- The post's info -->
                   <!-- 'abbr' just to abbreviate-->
                   <abbr class="published" title="2012-09-25T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
                       25th September 2012
                   </abbr>

                   <!-- If the <address> element is inside an <article> element, it represents contact information for that article. -->
                   <address class="vcard author">
                       By <a class="url fn" href="#">Héctor el Bala</a>
                   </address>
                </footer><!-- /.post-info -->

                <div class="entry-content"> <!-- The post's content -->
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
                </div><!-- /.entry-content -->
            </article>
        </li>

        <li>
            <article class="hentry">	
                <header> <!-- The post's title-->
                    <h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">Second steps</a></h2>
                </header>

                <footer class="post-info"> <!-- The post's info -->
                   <!-- 'abbr' just to abbreviate-->
                   <abbr class="published" title="2012-09-26T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
                       26th September 2012
                   </abbr>

                   <!-- If the <address> element is inside an <article> element, it represents contact information for that article. -->
                   <address class="vcard author">
                       By <a class="url fn" href="#">Raul Despeinado</a>
                   </address>
                </footer><!-- /.post-info -->

                <div class="entry-content"> <!-- The post's content -->
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
                </div><!-- /.entry-content -->
            </article>
        </li>

                <li>
            <article class="hentry">	
                <header> <!-- The post's title-->
                    <h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to this POST TITLE">Third steps</a></h2>
                </header>

                <footer class="post-info"> <!-- The post's info -->
                   <!-- 'abbr' just to abbreviate-->
                   <abbr class="published" title="2012-09-27T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
                       27th September 2012
                   </abbr>

                   <!-- If the <address> element is inside an <article> element, it represents contact information for that article. -->
                   <address class="vcard author">
                       By <a class="url fn" href="#">Fernando Higo Chungo</a>
                   </address>
                </footer><!-- /.post-info -->

                <div class="entry-content"> <!-- The post's content -->
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
                </div><!-- /.entry-content -->
            </article>
        </li>

    </ol>
</section>